// PopupComponent.vue
<template>
  <div :class="['popup', visible ? 'visible' : 'hidden']">
    <slot>提示内容</slot>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  duration: {
    type: Number,
    default: 3000, // 默认3秒
  },
});

const emit = defineEmits(['update:visible']);

// 自动隐藏逻辑
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      setTimeout(() => {
        emit('update:visible', false);
      }, props.duration);
    }
  }
);
</script>

<style scoped>
.popup {
  position: fixed;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  top: -50px; /* Start off-screen */
  left: 50%;
  width: 200px;
  height: 40px;
  transform: translateX(-50%);
  background-color: #efd8d8;
  border: 1px solid #ff0000;
  color: #ff0000;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 18px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 1s ease, top 1s ease;
}

.popup.visible {
  top: 20px; /* Move into view */
  opacity: 1;
}

.popup.hidden {
  top: -50px; /* Move out of view */
  opacity: 0;
}
</style>
